<template>
	<span>

		<el-button size="mini" type="primary" @click="showDialog" style="margin-left: 10px;">
			合集管理
		</el-button>
		<el-dialog title="合集管理" :visible.sync="dialogFormVisible" :fullscreen="fullscreen">
			<el-form ref="dataForm" :model="form" label-position="right">
				<el-form-item label="B站合集aid" :label-width="formLabelWidth">
					<el-input v-model="form.aid" placeholder="请输入B站aid" autocomplete="off" style="width:40%;"></el-input>
					<el-button type="primary" @click="getFromBilibili">重新获取</el-button>
				</el-form-item>
				<el-form-item label="缩略图地址" :label-width="formLabelWidth">
					<el-input v-model.number="form.BilibiliObj.pic" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<el-table ref="multipleTable" border :data="tableData" style="width: 100%"  @selection-change="handleSelectionChange">
				<el-table-column prop="select" type="selection" width="55">
					
				</el-table-column>
				<el-table-column prop="cid" label="cid
					">
				</el-table-column>
				<el-table-column prop="part" label="视频标题">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="updateOne(scope.row)">更新</el-button>

					</template>
				</el-table-column>


			</el-table>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">退 出</el-button>
				<el-button type="primary" @click="clickOK">更新选中并保存</el-button>
			</div>
		</el-dialog>



		</div>
	</span>
</template>

<script>
	import {
		createColumn,
		getColumnList,
		getColumnListCount,
		getOneColumn,
		updateColumn
	} from '@/api/column'
	import {
		getFromBilibili,
		updateFromBilibili
	} from '@/api/article';
	export default {
		props: ['column'],
		data() {
			return {


				dialogFormVisible: false,
				formLabelWidth: "120px",
				fullscreen: true,
				form: {
					title: "",
					weight: "",
					content: "",
					imgURL: "",
					aid:"",
					BilibiliObj: {
						pic: "",
						aid: ""
					}
				},
				multipleSelection:[],
				tableData: [],
				qiniuaddr: process.env.VUE_APP_QINIU_IMAGEURL // 七牛云的图片外链地址
			}
		},
		created() {
			this.initData()

			console.log(this.qiniuaddr)
		},
		methods: {
			initData() {
				this.resetTemp()
				this.getColumn()
			},
			resetTemp() {
				this.form = {
					title: "",
					weight: "",
					content: "",
					imgURL: "",
					aid:"",
					BilibiliObj: {
						pic: "",
						aid: ""
					}
				}
				this.multipleSelection=[];
				this.tableData=[]

			},

			getColumn() {
				getOneColumn(this.column.id, {}).then(response => {
					console.log(response)
					if (!response.BilibiliObj) {
						response.BilibiliObj = {
							pic: "",
							aid: ""
						}
					}else{
						this.tableData=response.BilibiliObj.pages
					}
					this.form = response


				}).catch(error => {
					this.$message({
						message: error,
						type: 'error'
					});
				})
			},
			showDialog() {
				console.log(this.column)
				this.initData()
				this.dialogFormVisible = true

			},

			clickOK() {

				this.updateFromBilibili(this.multipleSelection)
				this.updateColumn()

			},
			updateOne(one){
				this.updateFromBilibili([one])
			},
			updateColumn() {
				console.log(this.form)
				updateColumn(this.form).then(response => {
					console.log(response)
					// this.dialogFormVisible = false
					this.$message({
						message: '栏目更新成功',
						type: 'success'
					});
					// this.initData()

				}).catch(error => {
					this.$message({
						message: error,
						type: 'error'
					});

				})
				console.log(this.form)
				// 
			},

			updateFromBilibili(selectArticle) {

				updateFromBilibili({
						aid: this.form.aid,
						columnId: this.form.id,
						list: selectArticle
					})
					.then(response => {
						console.log(response);
						if (response.data.length == 0) {
							return this.$message({
								message: response.data,
								type: 'error'
							});
						}


					})
					.catch(error => {
						this.$message({
							message: error,
							type: 'error'
						});
					});
			},

			getFromBilibili() {
				 // this.$refs.multipleTable.clearSelection();
				var id = this.form.aid.toString(); //'80094359'
				// id=this.form.BilibiliObj.aid.toString()||'80094359';
				console.log(this.form.BilibiliObj)
				if (!id) {
					return this.$message({
						message: '请输入B站aid',
						type: 'error'
					});
				}
				console.log(id)
				id = id.replace('av', '');
				getFromBilibili({
						id: id
					})
					.then(response => {
						console.log(response);
						if (response.data.code != 0) {
							return this.$message({
								message: response.data,
								type: 'error'
							});
						}
						var data = response.data.data;
						data.pic = this.qiniuaddr + 'cms_' + data.aid + '.jpg';
						var pagesOld=this.form.BilibiliObj.pages;
						var pagesNew=data.pages;
						for(var i=0;i<pagesNew.length;i++){
							pagesNew[i].select=true;
							for(var j in pagesOld){
								
								if(pagesNew[i].cid==pagesOld[j].cid){
									pagesNew[i].select=false;
									break;
								}
							}
							
						}
						
						console.log(pagesNew) 
						this.form.BilibiliObj = data

						this.form.BilibiliObj.pic = this.qiniuaddr + 'cms_' + data.aid + '.jpg';
						this.tableData = pagesNew
						this.$nextTick(() => {
							for(var i in this.tableData){
								if(this.tableData[i].select){
									 this.$refs.multipleTable.toggleRowSelection(this.tableData[i],true);
								}
							}
						})
							
						
						
					})
					.catch(error => {
						this.$message({
							message: error,
							type: 'error'
						});
					});
			},
      handleSelectionChange(val) {
        console.log(val);
		this.multipleSelection = val;
      }
		}
	}
</script>
